<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@page import="com.cap.bts.framework.usermgnt.constant.EmployeeStatus"%>    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>查询套餐</title>
<%@include file="../include/include.jsp"%>
<link rel="stylesheet" type="text/css" href="${csspath }/public.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/datepicker.css"/>
<link rel="stylesheet" type="text/css" href="${csspath }/style_l.css"/>
<script type="text/javascript" src="${jspath }/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${jspath }/jquery.ui.min.js"></script>
<script type="text/javascript" src="${jspath }/ui.datepicker_zh-CN.js"></script>
<script type="text/javascript" src="${jspath }/jquery.blockUI.js"></script>
<script type="text/javascript" src="${layerPath}/layer.js"></script>
<script type="text/javascript" src="${jspath }/public.js"></script>
<script type="text/javascript" src="${jspath }/jquery.selectAll.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="${jspath}/jquery/jquery.alerts.js"></script>
<link rel="stylesheet" type="text/css" href="${csspath}/jquery.alerts.css" />

<link rel="stylesheet" type="text/css"
	href="${webcontext}/css/validationEngine.jquery.css" />
<script src="${jspath}/jquery/validate/jquery.validationEngine.js"
	type="text/javascript"></script>
<script src="${jspath}/jquery/validate/jquery.validationEngine-zh.js"
	type="text/javascript"></script>
	<script type="text/javascript"
	src="${webcontext}/javascript/jquery/jquery.ui.draggable.js"></script>
<link rel="stylesheet" type="text/css"
	href="${bootstrapPath}/css/bootstrap.css" />
<script type="text/javascript" src="${bootstrapPath}/js/bootstrap.js"></script>
<style type="text/css">
.formError .formErrorContent {
    -moz-border-radius: 6px 6px 6px 6px;
    -moz-box-shadow: 0 0 6px #000000;
    background: none repeat scroll 0 0 #EE0101;
    border: 2px solid #DDDDDD;
    color: #FFFFFF;
    font-family: tahoma;
    font-size: 11px;
    padding: 4px 10px;
    width: 100px;
}
/* .align_l{ */
/* 	border: 1px solid black; */
/* } */
.data_tab tr.over td {
	color: #000;
	font-weight: bold;
	background-color: #fff;
}

.data_tab tr.over td a {
	background: url("${webcontext}/images/menu/title_bg.jpg") repeat-x;
}

.align_m {
	border: 0px solid #EBEBEB;
	color: #000;
}

.align_l {
	background-color: #5cb85c;
}

.align_w {
	border: 1px solid #EBEBEB;
	background-color: #EBEBEB;
	color: #000;
}

.data_tab tr.over .align_l {
	background-color: #c9e8f7;
}

.data_tab tr.over .align_m {
	background-color: #fff;
	font-weight: normal;
}

.data_tab tr.over .align_w {
	background-color: #EBEBEB;
	font-weight: normal;
}

.hasUsed {
	color: #666666;
}
.hr {
	text-align: center;
	width: 100%;
	background-color: #96c2f1;
	height: 1px;
}
</style>

<script type="text/javascript">
$(function(){
	
	$('.data_tab .tr_lign_l').bind('click', function() {
		 if(window.cur) window.cur.style.background = "";  
		 if(window.cur) window.cur.style.fontWeight = "normal";  
//         this.style.background = "#c9e8f7";
//         this.style.fontWeight = "bolder";
        window.cur = this; 
	});
	
	$("#data_tab .tr_lign_l")
	.click(
			function() {
				if ($(this).find("td").eq(6).text() == "收起") {
					$(this)
							.find("td")
							.eq(6)
							.html(
									'展开<i class="glyphicon glyphicon-menu-down" style="color: #fff"></i>');
				} else {
					$(this)
							.find("td")
							.eq(6)
							.html(
									'收起<i class="glyphicon glyphicon-menu-up" style="color: #fff"></i>');
				}
				$(this).next().toggle();
			});
	
	//控制全部用完之后也展开
/* 	$("#changeDisplay"+$("#packageIdHtxt").val()).html("收起△");
	$("#packageDetail"+$("#packageIdHtxt").val()+"Tr").show(); */
	
	$("#returnBtn").click(function(){
		window.location.href="${webcontext}/crmdp/dealer/member/redirectMaintainMemberPage";
	});
	
// 	if($("#changeDisplay"+$("#packageIdHtxt").val()).html()==null){
// 		$('#data_tab tr td:eq(6)').html("收起△");
// 		$("#data_tab tr").next().show();
// 	}
});

function changeDisplay(id){
	/* if($("#changeDisplay"+id).html()=="展开▽"){
		$("#changeDisplay"+id).html("收起△");
	}else{
		$("#changeDisplay"+id).html("展开▽");
	}
	$("#packageDetail"+id+"Tr").toggle(); */
}

function useItem(packageId,detailId,hasVerificationCode,lineId,useTimes,countOfPackageLines){
	var isLast=false;
    if(countOfPackageLines==1){isLast=true}
    layer.load(1);
	if(hasVerificationCode == "Y"){
		$.ajax({
			type:'POST',
			url: '${webcontext}/crmdp/dealer/redemption/checkActivicationCodeExsit',
			async:false,
			data :"id="+packageId+"&detailId="+detailId
					+"&activicationCode="+$("#sendCode"+packageId+"Detail"
					+detailId+"Txt").val()+"&isLast="+isLast
					+"&lineId="+lineId+"&useTimes="+useTimes,
			dataType : 'json',
  				success : function(data) {
					layer.closeAll('loading');
				if(data==true){
					jAlert("使用成功！","提示信息",function(){
						$("#packageIdHtxt").val(packageId);
						$("#packageDetailIdHtxt").val(detailId);
						$('#show_form').attr('action', '${webcontext}/crmdp/dealer/redemption/showMemberPackageList');
		            	$("#show_form").submit(); 
					});
				}else{
					jAlert("抵扣码错误！", "提示信息");
				}
		    }
		}); 
	}else{
		layer.closeAll('loading');
		jConfirm("确定使用吗？", "确认信息", function(result){
			if(result == true){
				$.ajax({
					type:'POST',
					url: '${webcontext}/crmdp/dealer/redemption/useActivicationCode',
					async:false,
					data :"id="+packageId+"&detailId="+detailId+"&activicationCode="
					+$("#sendCode"+packageId+"Detail"+detailId+"Txt").val()
					+"&isLast="+isLast+"&lineId="+lineId+"&useTimes="+useTimes,
					dataType : 'json',
		  				success : function(data) {
						if(data==true){
							jAlert("使用成功！","提示信息",function(){
								$("#packageIdHtxt").val(packageId);
								$("#packageDetailIdHtxt").val(detailId);
								$('#show_form').attr('action', '${webcontext}/crmdp/dealer/redemption/showMemberPackageList');
				            	$("#show_form").submit(); 
							});
						}else{
							jAlert("使用失败！", "提示信息");
						}
				    }
				}); 
			}
		});
	}
}

function sendMessage(id,detailId) {
 	jConfirm("确定发送短信抵扣码?","确认信息",function(){
	 	$.ajax({
			type:'POST',
			url: '${webcontext}/crmdp/dealer/redemption/sendRedemptionCode',
			async:false,
			data :"memberPackageId="+id+"&redemptionId="+detailId,
			dataType : 'json',
					success : function(data) {
				if(data==true){
					jAlert("抵扣码发送成功！","提示信息");
				}else{
					jAlert("抵扣码发送失败！", "提示信息");
				}
		    }
		}); 
 	});
}
</script> 
</head>
<body>
    <div class="spliter h_10"></div> 
    <!-- <div id="breadcrumb"></div> -->
    <br>
	<font style="font-family: Microsoft YaHei;">手机号：${memberInfo.mobilePhone} 姓名：${memberInfo.memberName} 车牌：${memberInfo.carPlate}</font>
	<div id="content" style="height: 600px;width: 1137px;">
		<div id="wrap">
			<form:form id="show_form" action="${webcontext}/crmdp/dealer/redemption/getRedemptionPackage" method="post" modelAttribute="dto">
			<input type="hidden" id="memberIdHtxt" name="id" value="${memberInfo.id}">
			<input type="hidden" id="mobilePhoneHtxt" name="mobilePhone" value="${memberInfo.mobilePhone}">
			<input type="hidden" id="memberNameHtxt" name="memberName" value="${memberInfo.memberName}">
			<input type="hidden" id="carPlateHtxt" name="carPlate" value="${memberInfo.carPlate}">
			<input type="hidden" id="packageIdHtxt" name="packageId" value="${memberInfo.packageId}">
			<input type="hidden" id="packageDetailIdHtxt" name="packageDetailId" value="${memberInfo.packageDetailId}">
			<div id="packageDiv">
				<div id="dataTable">
					<table id="data_tab" class="table">
					<tr>
						<th width="20%" class="text-left">&nbsp;套餐类型</th>
                        <th width="15%" class="text-left">&nbsp;卡号</th>
                        <th width="15%" class="text-left">&nbsp;购买日期</th>
                        <th width="15%" class="text-left">&nbsp;激活日期</th>
                        <th width="15%" class="text-left">&nbsp;失效日期</th>
						<th width="10%" class="text-left">&nbsp;状态</th>
                        <th width="10%" class="text-left">&nbsp;操作</th>
                    </tr>
                    <core:forEach items="${memberPackageInfoList}" var="list">
                    <tr class="tr_lign_l">
						<td class="align_l" style="color: #fff">${list.name}</td>
                        <td class="align_l" style="color: #fff">${list.packageNumber}</td>
                        <td class="align_l" style="color: #fff">${list.purchaseDate}</td>
						<td class="align_l" style="color: #fff">${list.activeDate}</td>
						<td class="align_l" style="color: #fff">${list.expireDate}</td>
						<td class="align_l" style="color: #fff">
						<core:choose>
						<core:when test="${list.status==0}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",0) %>
						</core:when>
						<core:when test="${list.status==1}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",1) %>
						</core:when>
						<core:when test="${list.status==2}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",2) %>
						</core:when>
						<core:when test="${list.status==3}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",3) %>
						</core:when>
						<core:when test="${list.status==4}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",4) %>
						</core:when>
						<core:when test="${list.status==5}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",5) %>
						</core:when>
						<core:when test="${list.status==6}">
						<%= CodeTextUtils.getText("MemberPackageInfo.Status",6) %>
						</core:when>
						</core:choose>
						</td>
						<core:choose>
						<core:when test="${list.status ==2}">
                        	<td class="align_l" style="color: #fff">收起<i class="glyphicon glyphicon-menu-up" style="color: #fff"></i></td>
						</core:when>
						<core:otherwise>
                        	<td class="align_l" style="color: #fff">展开<i class="glyphicon glyphicon-menu-down" style="color: #fff"></i></td>
						</core:otherwise>
                        </core:choose>
                    </tr>
                    <core:choose>
                    <core:when test="${list.status ==2}">
                    	<tr id="packageDetail${list.id}Tr">
                    </core:when>
                    <core:otherwise>
                    	<tr id="packageDetail${list.id}Tr" style="display:none">
                    </core:otherwise>
                    </core:choose>
<!--                     <tr> -->
                    	<td colspan="7">
          					<div id="packageDivDetail" style="margin-left: 20px;">
								<div id="dataTable">
									<table id="table" class="table table-hover">
										<core:choose>
											<core:when test="${list.hasUnused and list.hasUsed}">
												<tr>
<%-- 												<td class="align_m" width="20%" rowspan="${list.memberPackageRedemptionList.size()+list.memberUsedPackageRedemptionList.size()+2}">使用情况</td> --%>
													<td width="20%"><strong>可用项目</strong></td>
													<td width="25%"><strong>描述</strong></td>
													<td width="10%"><strong>可使用次数</strong></td>
													<td width="25%"><strong>抵扣码</strong></td>
													<td width="10%"><strong>操作</strong></td>
					                    		</tr>
						                    	<core:forEach items="${list.memberPackageRedemptionList}" var="detailList">
								                <tr class="success">
													<td class="text-left success">${detailList[2]}</td>
													<td class="text-left">${detailList[3]}</td>
													<td class="text-right" style="padding-right: 40px;">${detailList[4]}</td>
													<core:if test="${detailList[5] == 'Y'}">
														<td class="text-r"><input type="text" id="sendCode${list.id}Detail${detailList[7]}Txt" width="20px"/>&nbsp;&nbsp;&nbsp;
															<input id="sendCode${list.id}Detail${detailList[7]}Btn" type="button" class="btn btn-success btn-xs" onClick="sendMessage('${list.id}','${detailList[7]}')" value="发送抵扣码"/>
														</td>
							                        </core:if>
													<core:if test="${detailList[5] == 'N'}">
														<td class="text-left">无需抵扣码，可直接使用</td>
							                        </core:if>
							                        <td class="align_m" align="left">
							                        	<input id="useItemBtn" type="button" class="btn btn-success btn-xs" onClick="useItem('${list.id}','${detailList[7]}','${detailList[5]}','${detailList[1]}','${detailList[4]}','${list.countOfPackageLines}')" value="使用"/>
							                        </td>
								                </tr> 
					                      		</core:forEach>
					                      		<tr>
													<td class="align_m" width="20%"><strong>已用项目</strong></td>
													<td class="align_m" width="25%"><strong>描述</strong></td>
							                        <td class="align_m" width="10%"><strong>已使用次数</strong></td>
							                        <td class="align_m" width="25%"><strong>使用日期</strong></td>
							                        <td class="align_m" align="left"></td>
					                   			</tr>
					                   			<core:forEach items="${list.memberUsedPackageRedemptionList}" var="usedDetailList">
							                    <tr>
													<td class="align_w hasUsed" align="left">${usedDetailList[2]}</td>
													<td class="align_w hasUsed" align="left">${usedDetailList[3]}</td>
							                        <td class="align_w hasUsed" align="right" style="padding-right: 40px;">${usedDetailList[4]}</td>
							                        <td class="align_w hasUsed" align="left"><fmt:formatDate value="${usedDetailList[6]}" pattern="yyyy-MM-dd HH:mm:ss" var="redeemDate"/>
							                        ${fn:substring(redeemDate, 0, 10)} </td>
							                        <td class="align_w hasUsed" align="left"></td>
							                    </tr> 
				                      			</core:forEach>
											</core:when>
											<core:when test="${list.hasUnused}">
												<tr>
<%-- 													<td class="align_m" width="20%" rowspan="${list.memberPackageRedemptionList.size()+1}">使用情况</td> --%>
													<td class="align_m" width="20%"><strong>可用项目</strong></td>
													<td class="align_m" width="25%"><strong>描述</strong></td>
							                        <td class="align_m" width="10%"><strong>可使用次数</strong></td>
							                        <td class="align_m" width="25%"><strong>抵扣码</strong></td>
													<td class="align_m" width="10%"><strong>操作</strong></td>
					                    		</tr>
						                    	<core:forEach items="${list.memberPackageRedemptionList}" var="detailList">
								                <tr class="success">
													<td class="align_m" align="left">${detailList[2]}</td>
													<td class="align_m" align="left">${detailList[3]}</td>
													<td class="text-right" style="padding-right: 40px;">${detailList[4]}</td>
													<core:if test="${detailList[5] == 'Y'}">
														<td class="align_m" align="left">
															<input type="text" id="sendCode${list.id}Detail${detailList[7]}Txt" width="20px"/>&nbsp;&nbsp;&nbsp;
															<input id="sendCode${list.id}Detail${detailList[7]}Btn" type="button" class="btn btn-success btn-xs" onClick="sendMessage('${list.id}','${detailList[7]}')" value="发送抵扣码"/>
														</td>
							                        </core:if>
													<core:if test="${detailList[5] == 'N'}">
														<td class="align_m" align="left">无需抵扣码，可直接使用</td>
							                        </core:if>
							                        <td class="align_m" align="left"><input id="useItemBtn" type="button" class="btn btn-success btn-xs" onClick="useItem('${list.id}','${detailList[7]}','${detailList[5]}','${detailList[1]}','${detailList[4]}','${list.countOfPackageLines}')" value="使用"/></td>
								                </tr> 
					                      		</core:forEach>
											</core:when>
											<core:when test="${list.hasUsed}">
												<tr>
<%-- 													<td class="align_m" width="20%" rowspan="${list.memberUsedPackageRedemptionList.size()+1}">使用情况</td> --%>
													<td class="align_m" width="20%"><strong>已用项目</strong></td>
													<td class="align_m" width="25%"><strong>描述</strong></td>
							                        <td class="align_m" width="10%"><strong>已使用次数</strong></td>
							                        <td class="align_m" width="25%"><strong>使用日期</strong></td>
							                        <td class="align_m" width="10%"></td>
					                   			</tr>
					                   			<core:forEach items="${list.memberUsedPackageRedemptionList}" var="usedDetailList">
							                    <tr>
													<td class="align_w hasUsed" align="left">${usedDetailList[2]}</td>
													<td class="align_w hasUsed" align="left">${usedDetailList[3]}</td>
							                        <td class="align_w hasUsed" align="right" style="padding-right: 40px;">${usedDetailList[4]}</td>
							                        <td class="align_w hasUsed" align="left"><fmt:formatDate value="${usedDetailList[6]}" pattern="yyyy-MM-dd HH:mm:ss" var="redeemDate"/>
							                        ${fn:substring(redeemDate, 0, 10)} </td>
							                        <td class="align_w hasUsed"></td>
							                    </tr> 
				                      		</core:forEach>
											</core:when>
											</core:choose>
									</table>
								</div>
							</div>          	
                    	</td>
                    </tr> 
                    </core:forEach>
					</table>
				</div>
				<div class="spliter h_5"></div> 
				<div class="spliter h_10"></div> 
				<div class="btn_div">
                	<button type="button" id="returnBtn" class="btn" value="返回"><i class="glyphicon glyphicon-share-alt" style="color:#FFFFFF"></i>&nbsp;返回</button>
            	</div>
			</div>
           </form:form>
		</div>
	</div>
  </body>
</html>